<template>
	<view v-if="showTab" :style="theme">
		<view class="topTab flex" :style="{paddingTop:navigationBarHeight+'rpx',height:navHeight+'rpx'}">
			<view v-if="returnShow" style="width: 30rpx;" @click="navBack"></view>
			<u-icon v-if="returnShow" name="arrow-left" @click="navBack" />
			<view class="headTab">
				<u-tabs :list="tabList" lineHeight="6rpx" :scrollable="false"
					:activeStyle="{fontWeight: 'bolder',fontSize: '36rpx',color: '#222222'}"
					:inactiveStyle="{fontSize: '32rpx',color: '#666666'}" @click="tabclick" :current="active"></u-tabs>
			</view>
		</view>
		<view v-if="active == 0" class="head flex_between flex" :style="{top:navHeight+'rpx'}">
			<view class="left">
				<view v-for="(item,index) in lxList" :key="index" :class="lxIndex === index?'on':''"
					@click="lxBtn(index)">
					{{ item.name }}
				</view>
			</view>
			<view class="right">
				<view class="flex" @click="jump2('/pages/member/myCard')">
					<image :src="imgHost+'/ic_kechenbao.png'" mode=""></image>课程表
				</view>
				<view class="flex" @click="showPop = true">
					<image :src="imgHost+'/ic_shaixuan.png'" mode=""></image>筛选
				</view>
			</view>
		</view>
		<view v-if="active == 1" class="sjHead" :style="{top:navHeight+'rpx'}">
			<view class="weekList flex flex_between">
				<view v-for="(item,index) in dateList" :key="index" class="li" :class="weekIndex === index?'on':''"
					@click="weekClick(index)">
					<view class="week">{{ item.week }}</view>
					<view class="date">{{ item.date }}</view>
				</view>
			</view>
			<scroll-view v-if="teacherList && teacherList.length > 0" scroll-x class="teacherTab">
				<view v-for="(item, index) in teacherList" :key="index" class="li"
					:class="onTeach.indexOf(item.teacherId) > -1?'on':''" @click="szJlBtns(item)">
					<image :src="item.teacherImage ? item.teacherImage : imgHost+'/user.png'"></image>
					<view class="limit-1-line">{{item.teacherName}}</view>
				</view>
			</scroll-view>
		</view>
		<view class="bjj" :class="active == 0?'wu':''">
			<scroll-view v-if="active == 1 && flList && flList.length > 0" scroll-x class="flTab">
				<view v-for="(item, index) in flList" :key="index" :class="flIndex === index?'on':''"
					@click="flBtn(index)">
					{{ item.name }}
				</view>
			</scroll-view>
			<view v-if="active != 1 && list.length > 0" style="height: 30rpx;"></view>
			<KcList v-if="list && list.length > 0" :lxName="active==1?'jl':'sx'" :list="list" :teacherIds="onTeach" />
		</view>
		<u-loadmore v-if="end && list.length >= 10" :status="status" line />
		<view v-if="list.length === 0" class="no-order">
			<image :src="imgHost+'/default_nodata.png'"></image>
			<view>暂无课程～</view>
		</view>
		<u-popup :show="showPop" round mode="bottom">
			<view class="popcnt">
				<view class="popBt">
					筛选
					<u-icon name="close" @click="showPop =false"
						custom-style="position: absolute;right: 30rpx;top: 10rpx" size="40rpx" color="#999" />
				</view>
				<view class="sxBt">
					教练
				</view>
				<view class="flex sxUl">
					<view v-for="(item, index) in teacherList" :key="index"
						:class="onTeach.indexOf(item.teacherId) > -1?'on':''" @click="szJlBtn(item)" class="mb3">
						{{item.teacherName}}
					</view>
				</view>
				<view class="sxBt" style="margin-top: 0;">
					课程状态
				</view>
				<view class="flex sxUl">
					<view v-for="(item, index) in ktZtList" :key="index" :class="szZt.indexOf(item.value) > -1?'on':''"
						@click="szZtBtn(item)">{{ item.name }}</view>
				</view>
				<view class="flex flex_between">
					<view class="czBtn" @click="czBtn">重置</view>
					<view class="tjBtn" @click="searchBtn">确认</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import KcList from "@/components/kcList.vue";
	export default {
		components: {
			KcList
		},
		props: {
			returnShow: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				tabList: [{
					name: "常规课",
					value: '1',
					triggered: false,
				}, {
					name: "私教课",
					value: '2',
					triggered: false,
				}, {
					name: "视频课",
					value: '3',
					triggered: false,
				}],
				lxList: [{
					name: "全部",
					value: ''
				}, {
					name: "团体课",
					value: '1'
				}, {
					name: "长期课",
					value: '3'
				}],
				ktZtList: [{
					name: "报名中",
					value: '2'
				}, {
					name: "进行中",
					value: '4'
				}, {
					name: "已截止",
					value: '3'
				}],
				lxIndex: 0,
				active: 0,
				status: 'nomore',
				list: [],
				page: 1,
				end: false,
				firstQueryTime: '',
				showTab: false,
				navHeight: '',
				dateList: [],
				weekIndex: 0,
				teacherList: [],
				onTeach: [],
				flList: [{
					name: '全部',
					value: ''
				}, {
					name: '一对一',
					value: '0'
				}, {
					name: '一对多',
					value: '1'
				}],
				flIndex: 0,
				showPop: false,
				navigationBarHeight: '',
				szJl: [],
				szZt: [],
			}
		},
		mounted() {
			//监听下拉加载更多
			let that = this
			uni.$on('onReachBottom', () => {
				that.reachBottom()
			})
			this.active=uni.getStorageSync('curriculumActive') || 0
		},
		beforeDestroy() {
			uni.$off('onReachBottom');
			uni.$off('onPageScroll');
		},
		created() {
			const SystemInfomations = this.$app.systemInfo()
			/* 通用平台 */
			let navHeight = 100
			let navigationBarHeight = 100
			/* 微信小程序平台 */
			// #ifdef MP-WEIXIN
			navHeight = Number(SystemInfomations.navHeight + SystemInfomations.statusBarHeight) //头部导航栏总高度
			navigationBarHeight = Number(SystemInfomations.statusBarHeight) //头部导航栏高
			// #endif
			this.navHeight = navHeight
			this.navigationBarHeight = navigationBarHeight
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			czBtn() {
				this.onTeach = []
				this.szZt = []
				this.searchBtn()
			},
			navBack() {
				uni.navigateBack()
			},
			lxBtn(dex) {
				this.lxIndex = dex
				this.searchBtn()
			},
			szJlBtn(item) {
				let arr = [...this.onTeach]
				var index = arr.indexOf(item.teacherId)
				if (index > -1) {
					arr.splice(index, 1);
				} else {
					arr.push(item.teacherId)
				}
				this.onTeach = arr
			},
			szJlBtns(item) {
				let arr = [...this.onTeach]
				var index = arr.indexOf(item.teacherId)
				if (index > -1) {
					arr.splice(index, 1);
				} else {
					arr.push(item.teacherId)
				}
				this.onTeach = arr
				this.searchBtn()
			},
			szZtBtn(item) {
				let arr = [...this.szZt]
				var index = arr.indexOf(item.value)
				if (index > -1) {
					arr.splice(index, 1);
				} else {
					arr.push(item.value)
				}
				this.szZt = arr
			},
			tabclick(e) {
				this.active = e.index;
				uni.setStorage({
					key: 'curriculumActive',
					data: e.index
				});
				if (e.onTeach) {
					this.onTeach = e.onTeach
				} else {
					this.onTeach = []
				}
				if (e.index == 1) {
					this.getWeek()
				} else if (e.index == 0) {
					this.teacherAllList()
				} else {
					this.searchBtn()
				}
			},
			flBtn(index) {
				this.flIndex = index
				this.searchBtn()
			},
			getWeek() {
				const days = 7; // 近7天
				const week = ['日', '一', '二', '三', '四', '五', '六']; // 星期
				const dateList = Array.from({
					length: days
				}, (v, i) => i).map(day => {
					const date = new Date();
					date.setDate(date.getDate() + day);
					let M =
						(date.getMonth() + 1 < 10 ?
							"0" + (date.getMonth() + 1) :
							date.getMonth() + 1) + "-";
					let D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
					return {
						week: day == 0 ? '今天' : day == 1 ? '明天' : '周' + week[date.getDay()],
						day: date.getFullYear() + '-' + M + D,
						date: date.getDate()
					}
				});
				this.dateList = dateList
				this.teacherAllList()
			},
			searchBtn() {
				this.showTab = true
				this.showPop = false
				this.firstQueryTime = this.$app.firstQueryTime()
				this.list = [];
				this.page = 1;
				this.end = false;
				this.getList()
			},
			getList() {
				let param = {
					venueId: this.venueId,
					courseType: this.active == 1 ? '4' : this.active == 0 ? '1' : '5'
				}
				if (this.active != 2) {
					param.teacherIds = [...this.onTeach]
				}
				if (this.active == 0) {
					param.statusList = this.szZt
					param.type = this.lxList[this.lxIndex].value
				}
				if (this.active == 1) {
					param.classType = this.flList[this.flIndex].value
				}
				this.$app.ajax({
					data: {
						pagination: {
							firstQueryTime: this.firstQueryTime,
							page: this.page,
							rows: 10
						},
						param
					},
					api: this.$api.listCourseMini()
				}).then((res) => {
					if (res.errorCode === '000000') {
						if (!res.recordList || res.recordList.length < 10) {
							this.end = true
						}
						if (res.recordList) {
							this.list = this.list.concat(res.recordList)
						}
					}
				}).catch(() => {})
			},
			weekClick(index) {
				this.weekIndex = index
				this.teacherAllList()
			},
			teacherAllList() {
				this.$app.ajax({
					data: {
						param: {
							venueId: this.venueId,
							isOnJob: '1',
							status: '1',
							teacherType: this.active,
							day: this.active == 1 ? this.dateList[this.weekIndex].day : ''
						}
					},
					api: this.$api.teacherAllList()
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.teacherList = res.recordList || []
						this.searchBtn()
					}
				}).catch(() => {})
			},
			reachBottom() {
				if (!this.end) {
					this.page += 1;
					this.getList();
				}
			}

		}

	}
</script>
<style scoped lang="scss">
	.topTab {
		position: sticky;
		width: 100%;
		z-index: 100;
		left: 0;
		top: 0;
		// #ifdef H5
		padding-top: 0 !important;
		// #endif 
		right: 0;
		background-color: #fff;
		box-sizing: border-box;

		.headTab {
			width: 480rpx;
			margin-left: 10rpx;
		}
	}

	.head {
		background-color: #fff;
		padding: 30rpx;
		box-sizing: border-box;
		position: sticky;
		left: 0;
		z-index: 99;
		right: 0;

		.left {
			display: flex;

			view {
				width: 126rpx;
				line-height: 50rpx;
				border-radius: 30rpx;
				border: 1px solid #E5E5E5;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				text-align: center;
				margin-right: 20rpx;

				&:last-of-type {
					margin-right: 0;
				}

				&.on {
					border-color: $color;
					color: $color;
				}
			}
		}

		.right {
			display: flex;

			view {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				margin-left: 30rpx;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 8rpx;
				}

				&:first-of-type {
					margin-left: 0;
				}
			}
		}
	}

	.sjHead {
		background-color: #fff;
		padding: 12rpx 30rpx;
		box-sizing: border-box;
		position: sticky;
		left: 0;
		z-index: 99;
		right: 0;

		.weekList {
			margin-bottom: 24rpx;

			.li {
				width: 64rpx;
				text-align: center;

				.week {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					margin-bottom: 10rpx;
				}

				.date {
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 64rpx;
				}

				&.on {
					.date {
						background-color: $color;
						color: #fff;
					}
				}
			}

		}

		.teacherTab {
			white-space: nowrap;
			display: flex;
			width: 100%;

			.li {
				width: 105rpx;
				height: 144rpx;
				background: $bjColor;
				border-radius: 8rpx;
				text-align: center;
				display: inline-block;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-right: 12rpx;
				border: 1rpx solid $bjColor;
				padding-top: 12rpx;

				&:last-of-type {
					margin-right: 0;
				}

				image {
					width: 72rpx;
					height: 72rpx;
					border-radius: 50%;
				}

				view {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					margin-top: 4rpx;
				}

				&.on {
					border-color: $color;
					background-color: #fff;

					view {
						color: $color;
					}
				}
			}
		}
	}

	.flTab {
		white-space: nowrap;
		display: flex;
		box-sizing: border-box;
		padding: 30rpx;

		view {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			display: inline-block;
			color: #333333;
			padding: 0 20rpx;
			line-height: 52rpx;
			border-radius: 30rpx;
			border: 1px solid #E5E5E5;
			margin-right: 20rpx;

			&:last-of-type {
				margin-right: 0;
			}

			&.on {
				border-color: $color;
				color: $color;
			}
		}
	}

	.popcnt {
		padding: 30rpx;
		box-sizing: border-box;
		max-height: 100vh;
		overflow-y: auto;

		.popBt {
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: bolder;
			position: relative;
			color: #222222;
			text-align: center;
			padding: 10rpx 0 40rpx;
		}

		.sxBt {
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			margin: 30rpx 0;
		}

		.sxUl {
			flex-wrap: wrap;

			view {
				width: 154.5rpx;
				line-height: 64rpx;
				background: $bjColor;
				color: #333333;
				border-radius: 36rpx;
				text-align: center;
				margin-right: 24rpx;
				font-size: 26rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				/* autoprefixer: off */
				-webkit-box-orient: vertical;
				/* autoprefixer: on */

				&:nth-child(4n) {
					margin-right: 0;
				}

				&.on {
					background: $color;
					color: #fff;
				}
			}
		}


		.czBtn {
			color: #666666;
			width: 335rpx;
			line-height: 88rpx;
			background: $bjColor;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			text-align: center;
			margin-top: 30rpx;
		}

		.tjBtn {
			width: 335rpx;
			line-height: 88rpx;
			background: $color;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #fff;
			text-align: center;
			margin-top: 30rpx;
		}
	}

	.bjj {
		background-color: #fff;
		margin-top: 20rpx;
		&.wu {
			background: none;
			margin-top: 0;
		}
	}
</style>